<template>
  <div class="shopbag">
    
    <Back title="购物袋" :sticky="true">
      <template #back-right v-if="isLogin">
        <div @click="edit" v-if="isHas">{{isEdit ? '完成' : '编辑'}}</div>
      </template>
    </Back>

    <div v-if="isLogin">
      <div class="shopbag-box">
        <div class="shopbag-bg"></div>
        
        <div class="shopbag-list">
          <div class="s-item" v-for="(item, index) in shopbagData" :key="item.sid">
            <ShopbagItem :product="item" @simpleCheck="simpleCheck" @remove="removeOne(item, index)" @changeCount="changeCount(item.sid, $event)" />
          </div>

        </div>

      </div>

      <div v-if="isHas">
        <div v-show="!isEdit">
          <van-submit-bar :price="total" button-text="提交订单" @submit="goOrderBuy">
            <van-checkbox checked-color="#365DED" v-model="allChecked" @click="allSelect">全选</van-checkbox>
          </van-submit-bar>
        </div>

        <div v-show="isEdit" class="remove-select">
          <van-submit-bar button-text="删除选择" button-color="#ddd" @submit="removeMore">
            <van-checkbox checked-color="#365DED" v-model="allChecked">全选</van-checkbox>
          </van-submit-bar>
        </div>
      </div>

    </div>
    <div v-else>
      <van-empty image="error" description="请先登录">
        <van-button round color="#0C34BA" class="bottom-button" @click="goPage('Login')">登录</van-button>
      </van-empty>
    </div>

    <van-empty v-if="isLogin && !isHas" description="购物袋空空如也！">
      <van-button round color="#0C34BA" class="bottom-button" @click="goPage('Menu')">去逛一逛</van-button>
    </van-empty>

  </div>
</template>

<script>
  import Back from '../components/Back.vue'
  import ShopbagItem from '../components/ShopbagItem.vue'
  export default {
    name: 'Shopbag',

    data() {
      return {
        //全选
        allChecked: false,

        isEdit: false,

        //用户是否登录
        isLogin: false,

        //购物袋数据
        shopbagData: []
      };
    },

    components: {
      Back,
      ShopbagItem
    },

    created() {
      this.getShopbagData();
    },

    methods: {
      edit() {
        this.isEdit = !this.isEdit;
      },

      //获取购物袋数据
      getShopbagData() {
        this.axios({
          method: 'get',
          url: '/findAllShopcart'
        }).then(res => {
          

          if (res.data.code !== 700) {
            this.isLogin = true;
          }

          if (res.data.code === 5000) {
            //添加单选属性
            res.data.result.forEach(v => {
              v.isCheck = false;
            })

            this.shopbagData = res.data.result;

                       }

        }).catch(err => {
                  })
      },

      //跳转页面
      goPage(name) {
        this.$router.push({name});
      },

      //全选
      allSelect() {
        this.shopbagData.forEach(v => {
          v.isCheck = this.allChecked;
        })
      },

      //单选
      simpleCheck() {

        //寻找没有勾选的单选
        for (let i = 0; i < this.shopbagData.length; i++) {
          if (!this.shopbagData[i].isCheck) {
            this.allChecked = false;
            return;
          }
        }

        this.allChecked = true;
      },

      //单个删除商品
      removeOne(item, index) {
        //         //        

        this.axios({
          method: 'post',
          url: '/deleteShopcart',
          data: {
            sids: JSON.stringify([item.sid])
          }
        }).then(res => {
          
          //用户未登录, 跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

          if (res.data.code === 7000) {
            this.$toast('删除成功');
            this.shopbagData.splice(index, 1);

            //判断是否勾选全选
            this.simpleCheck();

          } else {
            this.$toast('删除失败');
          }
        }).catch(err => {
                  })
      },

      //删除多个商品
      removeMore() {
        
        if (this.selectProductSids.length === 0) {
          return this.$toast('请选择商品');
        }

        this.axios({
          method: 'post',
          url: '/deleteShopcart',
          data: {
            sids: JSON.stringify(this.selectProductSids)
          }
        }).then(res => {
          
          //用户未登录, 跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

          if (res.data.code === 7000) {
            this.$toast('删除成功');
            for (let i = 0; i < this.shopbagData.length; i++) {

              //如果sid在this.selectProductSids中, 则删除该商品
              if (this.selectProductSids.indexOf(this.shopbagData[i].sid) > -1) {
                this.shopbagData.splice(i, 1);
                i--;
              }
            }
          } else {
            this.$toast('删除失败');
          }
        }).catch(err => {
                  })
      },

      //修改数量
      changeCount(sid, e) {
        //         // 
         this.axios({
          method: 'post',
          url: '/modifyShopcartCount',
          data: {
            sid,
            count: e.count
          }
        }).then(res => {
          
          //用户未登录, 跳转到登录页面
          if (res.data.code === 700) {
            return this.$router.push({name: 'Login'});
          }

        }).catch(err => {
                  })
      },

      //跳转到订单结算页面
      goOrderBuy() {
        if (this.selectProductSids.length === 0) {
          return this.$toast('请选择商品');
        }

        let sids = this.selectProductSids.join('-');
        this.$router.push({name: 'OrderBuy', query: {sids}});
      }

    },

    computed: {

      //是否存在购物袋数据
      isHas() {
        return this.shopbagData.length > 0;
      },

      //获取勾选的商品
      selectProductSids() {
        let sids = [];
        this.shopbagData.forEach(v => {
          if (v.isCheck) {
            sids.push(v.sid);
          }
        })

        return sids;
      },

      //统计订单总价
      total() {
        let total = 0;
        this.shopbagData.forEach(v => {
          if (v.isCheck) {
            total += v.price * v.count;
          }
        })

        return total * 100;
      }

    }
  }
</script>

<style lang="less" scoped>
.shopbag{
  padding-bottom: 110px;
}
/deep/ .van-submit-bar__bar{
  padding: 0 10px;
}
.bottom-button{
  width: 120px;
  height: 34px;
}
.remove-select{
  /deep/ .van-submit-bar__button--danger{
    margin-left: auto;
  
  }

  /deep/ .van-button__text{
    color: #444;
  }
}

.s-item{
  margin-bottom: 10px;
  &:last-child{
    margin-bottom: 0;
  }
}

  .shopbag-bg{
    height: 40px;
    background: url('../assets/shopbag_bg.png') no-repeat center center;
    background-size: cover;
  }

  /deep/ .van-submit-bar{
    bottom: 50px;
  }


</style>